<template>
    <!-- <div class="main-box minHeightCss" v-loading="loading"> -->
	<div class="minHeightCss" v-loading="loading">
		<div class="dl-row mar-bottom-20">
			<div class="" style="margin-right: 20px;">
				<el-date-picker style="width: 400px;border-radius: 20px;"
						v-model="timeValue"
						type="daterange"
						value-format="yyyy-MM-dd"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期">
				</el-date-picker>
			</div>
			<el-button type="success" round size="small" @click="searchData()">搜索</el-button>
		</div>
		<div v-if="data.length>0" >
			<div class="em-history-box border-main mar-bottom-20" v-for="(record,index) in data"
				 :key="index">
				<div class="title dl-row center">
					<h1>{{record.mapId}}</h1>
					<span>训练时间：{{record.createTime}}</span>
				</div>
				<div class="dl-row-sb">
					<div>
						<ul class="em-score">
							<li>得分</li>
							<li>{{record.score}}</li>
						</ul>
					</div>
					<div>
						<el-button v-if="record.isDelete==0" type="primary" plain round @click="showDetails(record)">查看详情</el-button>
						<el-button v-if="record.isDelete==1" type="primary" plain round @click="hideClick(record)">收起</el-button>
					</div>
				</div>
				<transition name="el-fade-in-linear">
					<div class="ranking-box mar-top-20"  v-show="record.isDelete">
						<div class="top dl-row center">
							<div class="name">操作</div>
							<div class="timeWidth">扣分</div>
						</div>
						<ul class="score-main">
							<li class="dl-row center"
								v-for="(scoreInfo,rankIndex) in scoreInfoList"
								:key="rankIndex">
								<div class="name dl-row center">
									<span>{{scoreInfo.ScoreType}}</span>
								</div>
								<div class="timeWidth center">
									<span>{{scoreInfo.score}}</span>
								</div>
							</li>
						</ul>
					</div>
<!-- 					
					<div class="ranking-box mar-top-20" v-show="record.isDelete">
						<div class="top dl-row">
							<span>消灭所有燃烧物所用时间: {{record.useTime}}秒</span><br/>
						</div>
						<div class="top dl-row">
							<span>未燃烧物资剩余数量: {{record.restNum}}</span>
						</div>
						<div class="top dl-row">
							<span>重要物资燃烧情况: {{record.burningSituation}}</span>
						</div>
						<div class="top dl-row">
							<span>灭火器使用情况: {{record.fireExtinguisherUsage}}</span>
						</div>
					</div> -->
				</transition>
			</div>
			<el-pagination
					:total="total" 
					:current-page="page + 1"
					style="margin-top: 8px;"
					layout="total, prev, pager, next, sizes"
					@size-change="sizeChange"
					@current-change="pageChange"/>
		</div>
		<div v-if="data.length==0 && !loading">
		   <el-empty class="empty" :image-size="250" :image="require('../../../assets/no_data_images/no_exam.png')"></el-empty>
		</div>
		<rank-form ref="rkForm"></rank-form>
    </div>
</template>

<script>
    import initData from '@/mixins/initData'
    import {getRank} from '@/api/check'
	//import {scoreBankList} from '@/api/practice'
	import { formateDate } from '@/utils/index'
	import rankForm from './rankFrom.vue'
    export default {
		loading:false,
        name: "collect",
        mixins: [initData],
		components: {rankForm},
        data() {
            return {
				typeQue: false,
				rankList:[],
				timeValue:[],
				scoreInfoList:[],
				showId:'',
                userImg: require('../../../assets/image/u353.png'),
                firstImg: require('../../../assets/image/first.png'),
                secondImg: require('../../../assets/image/second.png'),
                thirdImg: require('../../../assets/image/third.png'),
                type: 1,
				inputSearch:""
            }
        },
		filters: {
		  formateDate (time) {
			  if(time){
				 let date = new Date(time)
				 return formateDate(date, 'yyyy-MM-dd hh:mm:ss') 
			  }
		  }
		},
		created() {
			this.init()
		},
        methods: {
            beforeInit() {
                this.url = 'train-grade/vrUserGrade'
                this.params = {page: this.page, size: this.size}
                if(this.timeValue!=null && this.timeValue.length>0){
                	this.params.startTime=this.timeValue[0]
                	this.params.endTime=this.timeValue[1]
                }
                return true
            },
			bankLs(record){
				this.$refs.rkForm.dialog = true
				this.$refs.rkForm.bankId=record.bankId;
			},
            loadMore(checkId, resRank) {
                const params = {
                    checkId: checkId,
                    page: resRank.pagination.current,
                    size: resRank.pagination.size
                }
                getRank(params).then(res => {
                    resRank.pagination.current = res.pagination.current
                    resRank.pagination.size = res.pagination.size
                    resRank.pagination.total = res.pagination.total
                    resRank.pagination.records = resRank.pagination.records.concat(res.pagination.records)
                })
            },
            hideClick(row) {
                row.isDelete=0
            },
            showDetails(row){
				row.isDelete=1
				if(row.scoreInfo!=""){
				  var array=eval('(' + row.scoreInfo + ')');
				  if(Object.prototype.toString.call(array)==='[object Array]'){
				   this.scoreInfoList=array;
				  }
				}
            },
			searchData(){
				this.page=0
				this.init()
			}
        }
    }
</script>

<style lang="scss" scoped>
	.minHeightCss{
		 min-height: calc(100vh - 274px);
	}
	.empty{
		 height: calc(100vh - 254px);
	}
    .em-history-box {
        .title {
            margin-bottom: 15px;

            h1 {
                font-size: 18px;
                font-weight: bold;
                color: #333333;
                margin-right: 20px;
            }

            span {
                font-size: 12px;
                color: #999999;
            }
        }
    }
	.ranking-box{
	  background: #F6F6F6;
	  border-radius: 5px 5px 5px 5px;
	  padding: 20px;
	  .timeWidth{
	    width: 20%;
	    text-align: center;
	  }
	  .name{
	    width: 80%;
	    text-align: left;
	    margin-left: 2%;
	  }
	  .top{
	    color: #999999;
	    line-height: 14px;
	    margin-bottom: 20px;
	  }
	  .score-main{
	    height: 250px;
	    overflow:auto;
	    li{
	      height: 32px;
	      margin-bottom: 15px;
	    }
	    .name{
	      img{
	        width: 32px;
	        height: 32px;
	        margin-right: 10px;
	      }
	      h1{
	        font-size: 14px;
	        color: #333333;
	        margin-right: 10px;
	      }
	      p{
	        background: #FFFFFF;
	        border-radius: 13px 13px 13px 13px;
	        padding: 0 15px;
	        color: #0068B6;
	        font-size: 12px;
	        line-height: 26px;
	      }
	    }
	    .user-score{
	      font-size: 14px;
	      font-weight: bold;
	      color: #333333;
	      padding-left: 20px;
	    }
	  }
	}
	.dl-row {
	  display: flex;
	  flex-direction: row;
	  }
	  .number img{
	    width: 20px;
	    height: 20px;
	  }
	   .score-main li{
	    height: 22px;
	    margin-bottom: 10px;
	  }
</style>
